<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#he {
				width: 300px;
				height: 300px;
				position: relative;
				background-color: red;
				margin: 20px auto;
			}
			
			img {
				position: absolute;
				opacity: 0;
			}
			
			img:first-child {
				opacity: 1;
			}
		</style>
	</head>

	<body>
		<div id="he">
			<img src="img/img/1.jpg" />
			<img src="img/img/2.jpg" />
			<img src="img/img/3.jpg" />
			<img src="img/img/4.jpg" />
			<img src="img/img/5.jpg" />
			<img src="img/img/6.jpg" />
			<img src="img/img/7.jpg" />
			<img src="img/img/8.jpg" />

		</div>
		<div id="an">
			<button id="s">上一张</button>
			<button id="x">下一张</button>
			<button id="k">开始</button>
			<button id="j">结束</button>
		</div>
	</body>

</html>
<script type="text/javascript">
	var s = document.getElementById('s');
	var x = document.getElementById('x');
	var k = document.getElementById('k');
	var j = document.getElementById('j');
	var img = document.getElementsByTagName('img');
	console.log(img);
	a = 0;
	s.onclick = function() {
		a--
		if(a < 0) {
			a = 7;
		}

		for(var i = 0; i < 8; i++) {
			if(a == i) {
				img[i].style.opacity = 1;
				console.log(img[i]);
			} else {
				img[i].style.opacity = 0
			}
		}
	}

	x.onclick = function xy() {
		a++
		if(a > 7) {
			a = 0;
		}
		for(var i = 0; i < 8; i++) {
			if(a == i) {
				img[i].style.opacity = 1;
				console.log(img[i]);
			} else {
				img[i].style.opacity = 0
			}
		}
	};
	var jishi;
	k.onclick=function(){
		
		clearInterval(jishi);
	jishi=	setInterval(function  () {
			a++
		if(a > 7) {
			a = 0;
		}
		for(var i = 0; i < 8; i++) {
			if(a == i) {
				img[i].style.opacity = 1;
				console.log(img[i]);
			} else {
				img[i].style.opacity = 0
			}
		}
		},500)
	};
	j.onclick=function(){
		clearInterval(jishi);
	}
</script>